第一篇:前端VSCode常用插件 |
您所在的位置:网站首页 › dark web翻译 › 第一篇:前端VSCode常用插件 |
好多小伙伴正在踏入前端的学习路程, 或者正在看pink老师的视频,这里pink老师分享下我视频里面的小插件或者小技巧,这里pink老师分为三个章节来介绍下, 马上跟上录制的视频哦~ 听说,视频跟笔记一起看更搭配哦~~~ VSCode软件常用的插件 VSCode常用的快捷键 前端其他常用技巧/软件 本篇文章先介绍下常见的插件~~~~ 一、VSCode常用的插件 vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突,所以这里pink老师介绍几个常用的插件。 Chinese (Simplified) 汉化 Auto Rename Tag One Dark Pro 颜色主题 格式化代码(vscode系统自带) open in browser 浏览器预览页面 Live Server 实时预览(推荐) vscode-icons 设置文件图标主题 Easy LESS 编译less文件 会了吧 学习单词插件 (可以使用) 1.Chinese (Simplified) vscode下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。 中文插件chinese2.Auto Rename Tag 修改开始标签,结束标签跟着自动变化,比较好用。 auto rename tag3.One Dark Pro 颜色主题 我比较喜欢的一个颜色主题 页面的效果: 4.格式化代码(vscode系统自带) 现在格式化代码的插件非常多,比如Prettier等等。 刚开始学,不太建议安装插件,先自己手写规范的语法格式 但是html标签嵌套比较多,可能需要自动格式化比较好,所以我们可以利用vscode自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。 (1) 点击管理按钮---选择里面的设置命令 vscode 管理--设置(2)选择用户 ---> 文本编辑器 ---> 正在格式化 ---> 勾选如下图的2个按钮 vscode自动格式化代码这样,我们不用安装插件,就可以自动保存自动格式化代码了。 4.open in browser 浏览器预览页面 编写完代码,需要浏览器预览,可以安装这个插件 浏览器预览页面vscode 浏览器打开页面6. Live Server 实时预览(推荐) 刚才的插件是可以预览我们的页面,但是改完代码,浏览器必须要重新刷新,比较麻烦,因此推荐各位小伙伴安装 live server 这个插件,修改完代码,自动更新浏览器,爽歪歪~~~ live server 自动更新页面小技巧: 刚开始学习前端,基本页面很少,可以左边编辑器,右边浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。 小技巧注意点: 使用live server 各位小伙伴要注意, 先用vscode 打开 文件所在的目录文件夹哦。 7. vscode-icons 设置文件图标主题 可以很清楚看到文件对用的图标。 只是为了看文件更加直观哈 8. Easy LESS 编译less文件 我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件 8. 会了吧 是的,你没看错,这个插件的名字就是 你是不是还在为英文单词不认识而发愁,是不是认识不会读而烦心, 这个插件你值得拥有。 里面会有单词介绍,点击还会有发音,喜欢吧。 会了吧插件好的,这篇文章,先介绍到这里, 学到vue的同学肯定就安装vetru、eslint 等插件了,但是本章节先介绍pink老师视频里面推荐各位同学使用的插件。 下一篇介绍下vsocde常见的快捷键。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |